<template>
  <el-dialog title="新增道闸" size="medium" :visible.sync="params.show" width="90%" :before-close="handleClose">
    <div>
      <el-container>
        <el-main class="addsales-main">
          <el-form :inline="true" :model="res.params" :rules="rules" ref="ruleForm" size="medium" class="search-form" label-width="150px" style="padding-bottom: 10px;">
            <el-form-item label="市场：" required prop="marketId">
              <el-select v-model="res.params.marketId" placeholder="请选择市场" clearable>
                <el-option v-for="item in res.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="道闸编号" prop="gateCode">
              <el-input v-model="res.params.gateCode"></el-input>
            </el-form-item>
            <el-form-item label="道闸名称：" required prop="gateName">
              <el-input placeholder="请输入内容" v-model="res.params.gateName">
              </el-input>
            </el-form-item>

          </el-form>
        </el-main>
      </el-container>
    </div>
    <span slot="footer" class="dialog-footer">
		    <el-button @click="handleClose">取 消</el-button>
		    <el-button type="primary" @click="formSubmitChange()">立即创建</el-button>
		</span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        res: {
          marketOptions: [],
          params: {
            gateCode: '',
            gateName: '',
            marketId: ''
          }
        },
        rules: {
          gateCode: [{
            required: true,
            message: '请输入道闸编号',
            trigger: 'blur'
          }],
          gateName: [{
            required: true,
            message: '请输入道闸名称',
            trigger: 'blur'
          }],
          marketId: [{
            required: true,
            message: '请选择市场',
            trigger: 'blur'
          }]
        }
      }
    },
    props: [
      'params'
    ],
    methods: {
      handleClose () {
        this.params.show = false
      },
      formSubmitChange () {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$axios.get(this.$api.insertGate, {
              params: this.res.params
            }).then((res) => {
              if (res) {
                this.warning('新增成功', 'success')
                this.$emit('hanleCloseFn')
              } else this.warning('新增失败')
            })
          } else {
            return false
          }
        })
      },
      warning (val, state = 'warning') {
        this.$message({
          message: val,
          type: state
        })
        return false
      }
    },
    created () {
      this.$store.commit('getMarketOptions', this.res)
    }
  }
</script>
